<template>
	<view class="page-body">
		<u-navbar title="保证金奖励">
			<!-- <view class="cate">
				<u-subsection height="70" inactive-color="#000000" font-size="30" @change="sectionChange" :list="list"
					:current="0">
				</u-subsection>
			</view> -->
		</u-navbar>

		<view>

		</view>
		<view class="navbar mt10">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{current1: tabCurrentIndex === index}" @click="tabClick(index)" v-if="cate_ids===2">
				{{item.text}}
			</view>
			<view v-for="(item, index) in navRewardList" :key="index" class="nav-item"
				:class="{current1: tabCurrentIndex === index}" @click="tabClick(index)" v-if="cate_ids===1">
				{{item.text}}
			</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box bg-white" duration="300" @change="changeTab">
			<!-- 保证金奖励 -->
			<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex" v-if="cate_ids===1">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<empty v-if="tabItem.loaded === true && tabItem.list.length === 0"></empty>
					<!-- 列表 -->
					<view v-for="(item,index) in tabItem.list" :key="index" class="item b-tottom">
						<view @click="app.goPage('/pagesB/channel/bond/rewardInfo?order_id='+item.id+'&type=1')">
							<view class="header_title">
								<image
									:src="item.userinfo.headimgurl?config.baseUrl+item.userinfo.headimgurl:'/pagesB/static/channel/images/order_type02.png'"
									mode=""></image>
								<text> {{item.userinfo.real_name?item.userinfo.real_name:' '}}</text>
								<text
									:class="[item.statusd=='待打款'?'fr fs18 color_daida':item.statusd=='待确认'?'fr fs18 color_daique':'fr fs18 color_yifanh']">{{item.statusd}}</text>
							</view>
							<view class="shouyitype">收益类型：{{item.reward_name}}
							</view>
							<view class="shouyitype">创建时间：{{item.add_time}}
							</view>

							<view class="img_content">
								<image src="../../../static/public/images/baozhengjin.png" class="fl"></image>
								<view class="info mt10">
									<view class="reward_info">{{item.reward_info}}</view>
									<view class="all_money">￥{{item.bond_recharge_amount}}</view>
								</view>
							</view>
							<view class="">

								<text class="fr shouyitext">奖励保证金：
									<text style="color: #F06C50;" v-if="cate_ids ===1">￥{{item.reward_money}}</text>
									<!-- 保证金退还 -->
									<text style="color: #F06C50;"
										v-if="cate_ids ===2">￥{{item.balance_deduction}}</text>
								</text>


							</view>
						</view>
						<view class="action-box  u-margin-top-60 u-flex u-row-right">
							<button class="action-btn block grey_1" v-if="item.margin_audit_status!=2"
								@click="dialTel(item.hj_user_mobile)">联系下级</button>
							<button class="action-btn block grey_2"
								v-if="item.margin_audit_status==0 || item.margin_audit_status==3"
								@click="app.goPage('/pagesB/channel/bond/grid?order_id='+item.id+'&type=2')">去打款</button>

						</view>
					</view>
					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>

			<!-- 保证金退还 -->
			<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex" v-if="cate_ids===2">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<empty v-if="tabItem.loaded === true && tabItem.list.length === 0"></empty>
					<!-- 列表 -->
					<view v-for="(item,index) in tabItem.list" :key="index" class="item b-tottom">
						<view @click="app.goPage('/pagesB/channel/bond/info?order_id='+item.order_id+'&type=2')">
							<view class="header_title">
								<image
									:src="item.userinfo.headimgurl?config.baseUrl+item.userinfo.headimgurl:'/pagesB/static/channel/images/order_type02.png'"
									mode=""></image>
								<text> {{item.userinfo.nick_name?item.userinfo.nick_name:'平台'}}</text>
								<text
									:class="[item.status_a=='待打款'?'fr fs18 color_daida':item.status_a=='待确认'?'fr fs18 color_daique':'fr fs18 color_yifanh']">{{item.status_a}}</text>
								<!-- <text>{{item.status_a}}</text> -->

							</view>
							<view class="shouyitype">手机号：{{item.userinfo.mobile}}
							</view>
							<view class="shouyitype">下单时间：{{item.add_time}}
							</view>

							<view class="img_content" v-for="(items,indexs) in item.goodsList">
								<image src="../../../static/public/images/baozhengjin.png" class="fl"></image>
								<view class="info mt10">
									<view class="reward_info u-margin-right-20 ">{{items.goods_name}}</view>
									<view class="all_money u-flex u-row-between  ">￥{{items.sale_price}} <text
											class="u-margin-right-20">x{{items.goods_number}}</text></view>
								</view>

							</view>

							<view class="">

								<text class="fr shouyitext">退还保证金：
									<!-- 保证金退还 -->
									<text style="color: #F06C50;"
										v-if="cate_ids ===2">￥{{item.balance_deduction}}</text>
								</text>


							</view>
						</view>
						<view class="action-box  u-margin-top-60 u-flex u-row-right">
							<button class="action-btn block grey_1" v-if="item.margin_audit_status!=2"
								@click="dialTel(item.userinfo.mobile)">联系下级</button>
							<button class="action-btn block grey_2"
								v-if="item.margin_audit_status==0 || item.margin_audit_status==3"
								@click="app.goPage('/pagesB/channel/bond/grid?order_id='+item.order_id+'&type=1')">去打款</button>
							<!--<button class="action-btn block grey_1" @click="disposeLog(item.id,index,3)">联系上级</button>
							<button class="action-btn block  grey_1" @click="disposeLog(item.id,index,3)">未收到打款</button>
							<button class="action-btn block grey_2" @click="disposeLog(item.id,index,2)">确认收款</button> -->
						</view>
					</view>
					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view v-show="loadings" class="popContainer"></view>
		
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty";
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				selectText: '全部奖励',
				rewardTypeList: [{
					text: '全部奖励',
					id: 'all'
				}],
				selectshow: false,
				calendarText: '',
				show: false,
				mode: 'range',
				result: "请选择日期",
				startText: '开始',
				endText: '结束',
				btnType: 'primary',
				startDate: '',
				endDate: '',
				tabCurrentIndex: 0,
				param: {
					calendar: '',
					rewardType: 'all',
					state: 0,
					p: 0
				},
				navRewardList: [{
						state: '99',
						text: '全部',
						loadingType: 'more',
						list: [],
						p: 0
					},
					{
						state: '0',
						text: '待打款',
						loadingType: 'more',
						list: [],
						p: 0
					},
					{
						state: '1',
						text: '待确认',
						loadingType: 'more',
						list: [],
						p: 0
					},
					{
						state: '2',
						text: '已奖励',
						loadingType: 'more',
						list: [],
						p: 0
					}
				],
				navList: [{
						state: '99',
						text: '全部',
						loadingType: 'more',
						list: [],
						p: 0
					},
					{
						state: '0',
						text: '待打款',
						loadingType: 'more',
						list: [],
						p: 0
					},
					{
						state: '1',
						text: '待确认',
						loadingType: 'more',
						list: [],
						p: 0
					},
					{
						state: '2',
						text: '已返还',
						loadingType: 'more',
						list: [],
						p: 0
					}
				],
				list: [{
						name: '保证金退还',
						id: 2,
						type: 1
					},
					{
						name: '保证金奖励',
						id: 1,
						type: 2
					}
				],
				current: 1,
				cate_ids: 1,
				api_url: '',
				type: 2,
				loading: true,
				loadings: false
			}
		},
		onLoad() {
			this.loadData()
		},
		onShow() {},
		onReady() {},
		methods: {
			dialTel(tel){
				console.log(tel)
				uni.makePhoneCall({
				    phoneNumber: tel //仅为示例
				});
			},
			sectionChange(index) {
				if (this.loading == true) {
					this.loading = false
					this.loadings = true
					this.cate_ids = this.list[index].id;
					this.type = this.list[index].type;
					this.curNow = index;
					this.loadData('change');
				}
			},
			//获取订单列表
			loadData(source) {
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				if (source === 'change') {
					navItem.list = [];
					navItem.p = 0;
					navItem.loadingType = 'more';
				}
				if (navItem.loadingType == 'nomore' || navItem.loadingType === 'loading') {
					return;
				}
				if (source === 'tabChange' && navItem.loaded === true) {
					//tab切换只有第一次需要加载数据
					return;
				}

				navItem.p++;
				this.param.state = navItem.state;
				this.param.p = navItem.p;
				this.param.type = this.type;
				navItem.loadingType = 'loading';
				if (this.type == 1) {
					this.api_url = "channel/api.order/bondGetList"
				} else {
					// this.param.rewardType = 'bzjsjjl';
					this.param.rewardType = 'tzsjjl';
					this.api_url = "channel/api.wallet/getBondLog"
				}
				this.$u.post(this.api_url, this.param).then(res => {
					this.loading = true
					this.loadings = false
					navItem.list = navItem.list.concat(res.data.list);

					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.$set(navItem, 'loaded', true);
					//判断是否还有下一页，有是more  没有是nomore
					navItem.loadingType = navItem.p == res.data.page_count ? 'nomore' : 'more';

				})
			},

			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.loadData();
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			// 订单操作
			disposeLog(id, _index, _status) {

				let navItem = this.navList[this.tabCurrentIndex];
				this.$u.post('channel/api.Wallet/disposeRewardLog', {
					id: id,
					status: _status
				}).then(res => {
					navItem.list[_index].buttom = 0;
					if (_status == 3) {
						navItem.list[_index].status = '待确定';
					} else {
						navItem.list[_index].status = '已返';
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	@import "~@/pagesB/static/channel/css/wallet.scss";

	.popContainer {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0);
		width: 100%;
		height: 100%;
		z-index: 80000;
	}

	.cate {
		margin: auto;

	}

	.grey_1 {
		color: #86869C;
		border: 1rpx solid #86869C;

	}

	.grey_2 {
		color: #C39F4F;
		border: 1rpx solid #C39F4F;
	}

	.color_daida {
		color: #F42934;
	}

	.color_daique {
		color: #C39F4F;
	}

	.color_yifanh {
		color: #333333;
	}

	// .all_money{
	// 	display: flex;
	// 	justify-content: space-between;
	// 	}

	::v-deep .u-line-1 {
		// color: #19BE6B !important;
		padding: 12rpx 30rpx;
	}

	::v-deep .u-navbar-inner {
		// color: #19BE6B !important;
		height: 100rpx !important;
		color: #19BE6B !important;

	}

	::v-deep .u-subsection {
		border-radius: 19rpx !important;
	}

	::v-deep .u-item-bg {
		border-radius: 12rpx !important;
	}

	.line_box {
		.text {
			margin-top: 10rpx;
			color: $font-color-light;
		}
	}

	.u-item-text .u-line-1 {
		width: 500rpx;
	}

	.swiper-box {
		height: calc(100%);

		.list-scroll-content {
			position: relative;
			height: 100%;

			.item {
				padding: 20rpx;
				font-size: 30rpx;

				.info {
					display: block;
					font-size: 28rpx;
					color: $font-color-light;
				}

				.money {
					font-size: 30rpx;
					font-weight: 700;
					color: $font-color-base;
				}
			}
		}
	}

	.current1 {
		color: #C39F4F;
		font-weight: 600;
	}

	.navbar .nav-item.current1:after {
		content: '';
		position: absolute;
		display: inline-block;
		left: 50%;
		bottom: 0;
		width: 60%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		border-bottom: 2px solid;
		border-color: #C39F4F;
		background-color: #C39F4F;
	}

	.b-tottom {
		border-top: 15px solid #F2F2F2;
		border-bottom: 0.5px solid #F2F2F2;
	}

	.shouyitext {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}

	.color_yifan {
		color: #333333;
	}

	.color_daifan {
		color: #C39F4F;
	}

	.color_cannel {
		color: #999999;
	}

	.header_title {
		height: 80rpx;
		line-height: 80rpx;
	}

	.header_title image {
		height: 70rpx;
		width: 70rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.shouyitype {
		margin-top: 10rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.img_content {
		height: 160rpx;
	}

	.img_content image {
		height: 150rpx;
		width: 150rpx;
	}

	.img_content view {
		position: relative;
		left: 10rpx;
	}

	.img_content .all_money {
		color: #333333;
		font-size: 34rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
	}

	.img_content .reward_info {
		font-size: 28rpx;
		height: 100rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #86869C;
	}
</style>
